<script>
const animation = weex.requireModule('animation');
export default {
  props: ['data'],
  data() {
    return {
      newsOpacity: 1,
      newsIndex: 0,
      news: ''
    }
  },
  methods: {
    changeNews() {
      let news = this.$refs.news;
      let opacity = this.newsOpacity === 1 ? 0 : 1;
      let duration = this.newsOpacity === 1 ? 0 : 3000;
      animation.transition(news, {
        styles: {
          opacity
        },
        duration: 500, //ms
        timingFunction: 'ease',
        delay: 0 //ms
      }, () => {
        this.newsOpacity = opacity;
        if (this.newsOpacity === 0) {
          this.newsIndex++;
          if (this.newsIndex >= this.data.items.length) this.newsIndex = 0;
          this.news = this.data.items[this.newsIndex];
        }
        setTimeout(() => {
          this.changeNews();
        }, duration);
      });
    }
  },
  mounted() {
    this.news = this.data.items[this.newsIndex];
    this.changeNews();
  }
}
</script>
<template>
  <div class="news-wrap">
    <image class="news-icon" :src="data.title_logo_url"></image>
    <div class="news-line"></div>
    <div class="news-content" ref="news">
      <text class="news-text">{{news.news_title}}</text>
    </div>
  </div>
</template>
<style scoped>
.news-wrap {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.news-icon {
  width: 200px;
  height: 100px;
}

.news-line {
  width: 2px;
  height: 30px;
  background-color: #ccc;
}

.news-content {
  flex: 2;
  padding-left: 25px;
}

.news-text {
  color: #000;
  font-size: 25px;
}
</style>


